import { useTemplate } from '@inbiz/hooks';
import { useErrorBoundary } from 'use-error-boundary';
import _ from 'lodash';

const MessageDetailPortal = (props: any) => {
    const { controlId, message = {}, emit, callBackEvents } = props;
    const localeMessage = JSON.parse(localStorage.getItem(`${controlId}-message-h5-current-message`) || '');
    const _message = _.isEmpty(message) ? localeMessage : message;
    const [Temp] = useTemplate(_message?.WapTemplatePath);
    const { ErrorBoundary, didCatch } = useErrorBoundary();

    return (
        <div className='message-h5-message-detail-portal-wrapper' style={{ height: document.body.clientHeight }}>
            <div style={{ overflowY: 'auto', height: '100%', padding: '0 8px' }}>
                {
                    _message?.WapTemplateConfig == 1
                        ?
                        _message?.WapTemplatePath && _message?.WapTemplatePath?.trim() !== '' ?
                            Temp?.default ? <>
                                {
                                    didCatch ? <div className='inbiz-message-template-error'>模板解析失败，请检查js语法</div> :
                                        <ErrorBoundary>
                                            {/* @ts-ignore */}
                                            <Temp.default parameter={JSON.parse(_message?.Parameter)} record={_message || {}} emit={emit} callBackEvents={callBackEvents} type='detail' />
                                        </ErrorBoundary>
                                }
                            </> : null : null :
                        <div
                            dangerouslySetInnerHTML={{ __html: _message?.WapMsgContent }}
                        ></div>
                }
            </div>
        </div>
    )
}

export default MessageDetailPortal;